<template>
    <div>
        <p>原来的样子: {{ msg }}</p>

        <!-- 1.
        给过滤器传值
        语法: vue变量 | 过滤器名(值)
        -->
        <p>使用翻转过滤器: {{ msg|reverse('$') }}</p>

        <!-- 2.
			 多个过滤利使用
			 语法: vue变量 | 过滤器1 | 过滤器2
			 -->
        <p :title="msg|upper|reverse('^')">鼠标长停</p>
    </div>
</template>

<script>
export default {
    data() {
        return {
            msg: 'Hello, Vue'
        }
    },
    filters: {
        upper(val) {
            return val.toUpperCase()
        }
    }
}
</script>

<style>

</style>
